<template>
  <view
    class="tabbar-box"
    :style="{
      height: tabbar.tabBarHeight + 'rpx',
    }"
  >
    <view
      class="tabbar-content"
      :style="{
        backgroundColor: tabbar.backgroundColor,
        height: tabbar.tabBarHeight + 'rpx',
        borderRadius: tabbar.tabBarHeight / 2 + 'rpx',
      }"
    >
      <block v-for="(item, index) in tabbar.list" :key="index">
        <!-- 判断是否为突出样式 -->
        <navigator
          v-if="item.isSpecial == true"
          class="tabbar-nav"
          hover-class="none"
          :url="item.pagePath"
          open-type="navigate"
          @click="tabBarClick(item.pagePath)"
        >
          <view class="special-wrapper">
            <image class="tabbar-icon" :src="item.iconPath"></image>
          </view>
          <!-- <image class="special-text-wrapper" /> -->
          <text v-if="item.text != ''">{{ item.text }}</text>
        </navigator>

        <navigator
          v-else
          class="tabbar-nav"
          hover-class="none"
          :url="item.pagePath"
          open-type="switchTab"
          @click="tabBarClick(item.pagePath)"
        >
          <image
            class="tabbar-icon"
            :src="item.selected ? item.selectedIconPath : item.iconPath"
          ></image>
          <text v-if="item.text != ''">{{ item.text }}</text>
        </navigator>
      </block>
    </view>
  </view>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "TabBar",
  props: {
    tabbar: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {};
  },
  created() {
    //判断设备是否为 iPhone
    // uni.getSystemInfo({
    //   success: function(res) {
    //     // 根据 model 进行判断
    //     if (
    //       res.model === "iPhone X" ||
    //       "iPhone XR" ||
    //       "iPhone XS Max" ||
    //       "iPhone 11" ||
    //       "iPhone 11 Pro" ||
    //       "iPhone 11 Pro Max"
    //     ) {
    //        getApp().globalData.isIphone = true;
    //     }
    //   },
    // });
  },
  methods: {
    ...mapMutations(["tabbarChange"]),
    tabBarClick(pagePath) {
      // 更改tabbar选中状态数据
      this.tabbarChange(pagePath);
    },
  },
};
</script>

<style lang="scss" scoped>
.tabbar-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  // background-color: #fff;
  z-index: 999;

  .tabbar-content {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.08);

    .tabbar-nav {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;

      .tabbar-icon {
        width: 44rpx;
        height: 44rpx;
      }
    }

    .special-wrapper {
      box-sizing: border-box;
      position: absolute;
      top: -20%;
      left: 50%;
      border-radius: 50%;
      border-top: 2rpx solid #f2f2f3;
      background-color: #fff;
      text-align: center;
      padding: 6rpx;
      transform: translateX(-50%);

      .tabbar-icon {
        width: 120rpx;
        height: 120rpx;
      }
    }

    .special-text-wrapper {
      width: 56rpx;
      height: 56rpx;
    }
  }
}

.middle-wrapper {
  position: absolute;
  right: 310rpx;
  bottom: 0;
  background-color: #fff;
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border-top: 2rpx solid #f2f2f3;
}

.middle-wrapper.iphoneX-height {
  bottom: 66rpx;
}

.tabbar-box.iphoneX-height {
  padding-bottom: 66rpx;
}
</style>
